<template>
    <div>
        <!--查询-->
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="AO号">
                    <el-input size="mini" v-model="formInline.aoCode" placeholder="AO号"></el-input>
                </el-form-item>
                <el-form-item label="图号">
                    <el-input size="mini" v-model="formInline.itemCode" placeholder="图号"></el-input>
                </el-form-item>
                <el-form-item label="质量编号">
                    <el-input size="mini" v-model="formInline.qualityCode" placeholder="质量编号"></el-input>
                </el-form-item>
                <el-form-item label="是否处理">
                    <el-select size="mini" v-model="formInline.isDeal" placeholder="是否处理">
                        <el-option label="所有" value=""></el-option>
                        <el-option label="未处理" value="N"></el-option>
                        <el-option label="已处理" value="Y"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="doQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <div>
            <el-table :data="tableData"  border style="width: 100%" height="550">
                <el-table-column prop="isDeal" label="状态" ></el-table-column>
                <el-table-column prop="aoCode" label="AO号" width="140"></el-table-column>
                <el-table-column prop="itemCode" label="图号" width="160"></el-table-column>
                <el-table-column prop="mProductNumber" label="型号" width="120"></el-table-column>
                <el-table-column prop="qualityCode" label="质量编号" width="140" ></el-table-column>
                <el-table-column prop="mesCheckQualiticationId" label="合格证号" width="180" ></el-table-column>
                <el-table-column prop="beforeSplitHgz" label="拆分前合格证号" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="wmsDeliveryPlanId" label="交接单ID" width="240" show-overflow-tooltip></el-table-column>
                <el-table-column prop="erpWmsDeliveryPlanId" label="ERP交接单ID"  width="160"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="wmsItemInventoryId" label="台账ID"  width="160"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="msAoMatchInfoId" label="配套表ID(ms_ao_match_info)" width="240" show-overflow-tooltip></el-table-column>
                <el-table-column prop="msAoMatchBillId" label="物料清单表ID(ms_ao_match_bill)"  width="240"  show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="clearMathInfo(scope.$index, scope.row)"  type="text" size="mini">撤销入库</el-button>
                        <el-button @click.native.prevent="showCanelAlloment(scope.$index, scope.row)"  type="text" size="mini">取消占用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page.sync="page.currentPage"
                :page-sizes="[20, 200, 300, 400]" :page-size="page.pageSize" layout="total,sizes, prev, pager, next" :total="page.total">
            </el-pagination>

            <el-drawer  title="撤销占用" size="70%" :visible.sync="drawer.drawer"  :direction="drawer.direction" :before-close="handleClose">
                <el-button size="mini" type="primary" @click="cancelAlloment">撤销占用</el-button>
                <el-button size="mini" type="primary" @click="cancelOut">撤销出库</el-button>
                <el-table :data="drawer.tableData"  border  height="550" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column prop="allotmentStatus" label="占用状态" width="140"></el-table-column>
                    <el-table-column prop="invTransactStatus" label="出库状态" width="140"></el-table-column>
                    <el-table-column prop="aoCode" label="AO号" width="140" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="itemCode" label="图号" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="currentOnhandQty" label="库存数量" ></el-table-column>
                    <el-table-column prop="engagedQty" label="台账占用数量" ></el-table-column>
                    <el-table-column prop="allotmentQty" label="占用数量" ></el-table-column>
                    <el-table-column prop="wmsInvOutAllotmentId" label="占用ID" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="wmsItemInventoryId" label="台账ID" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request.js";
export default {
    data(){
        return {
            formInline:{aoCode:"",itemCode:"",qualityCode:"",isDeal:""},
            page:{currentPage:1,pageSize:20,total:0},
            tableData:[],
            drawer:{drawer:false,direction: 'rtl',tableData:[],selectData:[]},
            allotmentRow:{}
        }
    },
    methods:{
        handleSizeChange(val){
            this.page.pageSize = val;
        },
        handleCurrentChange(val){
            this.page.currentPage = val;
        },
        handleClose(done){
            done();
        },
        handleSelectionChange(val){
            this.selectData = val;
        },
        showCanelAlloment(index,row){
            this.drawer.drawer = true;
            this.allotmentRow = row;
            this.$options.methods.loadAlloment.bind(this)(row);
        },
        cancelAlloment(){//取消占用
            if(this.selectData.length!=1){
                this.$Alert({title:"失败",type:"error",message:"请选择一条记录"});
                return;
            }
            request.post("/packageUnpackRest/cancelAlloment",this.selectData[0]).then((res)=>{
                console.log("res",res);
                if(res.data.retCode=="200"){
                    this.$Alert({title:"失败",type:"success",message:res.data.message});
                }else{
                    this.$Alert({title:"失败",type:"error",message:res.data.message});
                }
                this.$options.methods.loadAlloment.bind(this)(this.allotmentRow);
            });
        },
        cancelOut(){//撤销出库
            if(this.selectData.length!=1){
                this.$Alert({title:"失败",type:"error",message:"请选择一条记录"});
                return;
            }
            request.post("/packageUnpackRest/cancelOut",this.selectData[0]).then((res)=>{
                console.log("res",res);
                if(res.data.retCode=="200"){
                    this.$Alert({title:"失败",type:"success",message:res.data.message});
                }else{
                    this.$Alert({title:"失败",type:"error",message:res.data.message});
                }
                this.$options.methods.loadAlloment.bind(this)(this.allotmentRow);
            });
        },
        clearMathInfo(index,row){
            request.post("/packageUnpackRest/clearAoMatchInfoSendData",row).then((res)=>{
                if(res.data.retCode=="200"){
                    this.$Alert({title:"失败",type:"success",message:res.data.message});
                }else{
                    this.$Alert({title:"失败",type:"error",message:res.data.message});
                }
                this.$options.methods.doQuery.bind(this)();
            });
        },
        loadAlloment(row){
            //queryAllotmentByItemInventoryId
            request.post("/packageUnpackRest/queryAllotment",row).then((res)=>{
                console.log(res);
                this.drawer.tableData = res.data;
            });
            
        },
        doQuery(){
            request.post("/packageUnpackRest/querySendCancelData",{queryMap:this.formInline,page:this.page}).then((res)=>{
                this.tableData = res.data.list;
                this.page.total = res.data.total;
            });
        }
    }
}
</script>